<template>
  <div class="index">
    <div class="tops">
      <!-- <router-link to="/login">12</router-link> -->
    </div>
    <div class="header">
      <div class="header1">
        <div class="head">
          <span class="span1">{{ main.position }}</span>
          <span class="span2">{{ main.level }}</span>
          <img :src="main.filepath" alt="touxiang" class="imgs" />
        </div>
        <span class="name">{{ main.name }}</span>
      </div>
      <div class="idea">
        <p>教学理念：{{main.title}}</p>
      </div>
    </div>
    <div class="main">
      <p class="tit">个人信息</p>
      <div class="mains">
        <div class="list">
          <span>姓名</span> <span>{{ main.name }}</span>
        </div>
        <div class="list">
          <span>性别</span> <span>{{ main['sex']==1 ? "男":"女" }}</span>
        </div>
        <div class="list">
          <span>职务</span> <span>{{ main.subname }}老师</span>
        </div>
        <div class="list"><span>授课时长</span> <span>{{main.teach_year}}年</span></div>
        <div class="list">
          <span>公司职务</span> <span>{{ main.position }}</span>
        </div>
        <div class="list">
          <span>参与项目</span> <span>{{ main.projects }}</span>
        </div>
      </div>
    </div>

    <div class="main2">
      <p class="tit">自我介绍</p>
        <p class="zwjs">{{ main.content }}</p>
    </div>
    <div class="main2">
      <p class="tit">教研组评价</p>
        <p class="zwjs">{{ main.research }}</p>
    </div>
    <div class="main2">
      <p class="tit">获得荣誉</p>
        <p class="zwjs">{{ main.research }}</p>
    </div>
    
  </div>
</template>
<style scoped>
.zwjs{margin: 1rem 0.5rem;padding: 0 0 1rem 1rem;font-size: 0.9rem;}

.header {
  background-color:  #d62c32;
  padding: 2rem 0 1rem 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
.head .imgs {
  display: block;
  margin: 0 auto;
  background-color: #fff;
  width:4rem;
  height: 4rem;
  border-radius:2rem;
}
.head img {
  width: 4rem;
}
.name {
  text-align: center;
  padding-top: 1rem;
  display: block;
  font-size: 0.9rem;
  color: #fff;
}
.head .span1 {
  border: 1px solid #ccc;
  background: #b5b5b5;
  color: #fff;
  font-size: 0.5rem;
  padding: 0 2px;
  border-radius: 4px;
  position: absolute;
  left: 4rem;
  top: 4rem;
}
.head .span2 {
  border: 1px solid #ccc;
  background: #f9a519;
  color: #fff;
  font-size: 0.5rem;
  padding: 0 2px;
  border-radius: 4px;
  position: absolute;
  right: 4rem;
  top: 4rem;

}
.idea {
    text-align: center;
      color: #fff;
}
.idea p {
  width: 80%;
  margin: 0 auto;

  font-size: 0.9rem;
}
.idea span {
  color: #fff;
  background: #84ccc9;
  font-size: 0.8rem;
  padding: 0 0.6rem;
  position: absolute;
  right: 2rem;
  top: 0;
  border-radius: 0.2rem;
}
.main,
.main2 {
  width: 90%;
  margin: 0 auto;
  margin-top: 2rem;
  border-radius: 1rem;
  border-top: 0px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  outline: none;
  padding: 0.1rem 0 0 0;
}

.tit {
  border-left: 0.3rem solid #d62c32;
  text-indent: 1rem;
}

.mains .list {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #f7f7f7;
  padding: 1rem 0;
  color: #909090;
  font-size: 0.9rem;
}
.text {
  width: 90%;
  margin: 0 auto;
  display: block;
  border: none;
  outline: none;
}
.main2 {
  position: relative;
}
.main2 .daos {
  color: #ccc;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}
.preservation {
  width: 10rem;
  color: #fff;
  background: #00b7ee;
  border: none;
  padding: 0.5rem 0;
  border-radius: 1rem;
  display: block;
  margin: 0 auto;
  outline: none;
}
.footer {
  display: flex;
  justify-content: space-around;
  font-size: 0.8rem;
  text-align: center;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 5px 0;
}
.footer div {
  text-align: center;
}
.footer img {
  display: block;
  width: 2rem;
  margin: 0 auto;
}
</style>
<script>
import axios from "axios"
export default {
   data(){
    return{
     main:[]
    }
  },
  created(){
    //banner
    
    let this_ = this
    console.log(localStorage.getItem("jsid"))
      axios
       .get('/Hmoepage/demeanor?id='+localStorage.getItem("jsid"))
       .then(function(res){ console.log(res),this_.main = res.data.data})
       .catch(function(err){console.log(err);})
  }
}
</script>
